<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@include file="/commons/header.jsp" %>


<div style="margin-left:210px;margin-top:65px;padding:10px 5px 0 5px;">

    <div style="line-height:26px;height:26px;margin-bottom:10px;">
        <h1 style="float:left;font-size:26px;">轮播图管理</h1>

        <span class="layui-breadcrumb" style="float:right;font-size:12px;">
                <a href="#">首页</a> <a><cite>轮播图管理</cite> </a>
            </span>
    </div>
    <h2>预览效果</h2>


    <div class="layui-carousel" id="test1" style="margin:0 auto;">
        <div carousel-item>
            <c:forEach items="${list}" var="l">
                <div>
                    <img src="${l.picture}" alt="" width="100%" height="100%">
                    <p>${l.title}</p>
                </div>
            </c:forEach>
        </div>
    </div>
    <br/><br/><br/>

    <form class="layui-form" action="">

        <c:forEach items="${list}" var="l" varStatus="vs">
            <div class="layui-form-item">
                <div>
                    <label class="layui-form-label">第${vs.count}张图片</label>
                    <input type="hidden" id="id${vs.count}" value="${l.id}">
                    <div class="layui-input-block">
                        <input type="text" required lay-verify="required"
                               class="layui-input" id="title${vs.count}" value="${l.title}" placeholder="显示的标题"
                               style="width:50%;float:left;margin-right:20px;"/>
                        <button type="button" class="layui-btn" id="phone${vs.count}" style="float:left;">
                            <i class="layui-icon">&#xe67c;</i>修改图片
                        </button>

                    </div>
                    <img src="${l.picture}" id="pic${vs.count}" width="198" height="108">

                </div>
            </div>
        </c:forEach>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即更改</button>
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>

    </form>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <script src="${pageContext.request.contextPath}/lib/layui.all.js"/>
    <script src="${pageContext.request.contextPath}/lib/lay/modules/form.js"></script>

    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                , width: '80%' //设置容器宽度
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>


    <script>
        layui.use(['upload', 'form'], function () {
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#phone1' //绑定元素

                , acceptMime: 'image/*',
                url: '${pageContext.request.contextPath}/manager/upload?op=appLogo' //上传接口
                ,
                accept: "images",
                done: function (res) {
                    //上传完毕回调

                    $("#pic1").attr("src", res["src"]);

                    layer.msg("上传成功");
                },
                error: function () {
                    //请求异常回调
                    layer.msg("上传失败");
                }
            });
            //执行实例
            var uploadInst = upload.render({
                elem: '#phone2' //绑定元素
                , acceptMime: 'image/*',
                url: '${pageContext.request.contextPath}/manager/upload?op=appLogo' //上传接口
                ,
                accept: "images",
                done: function (res) {
                    //上传完毕回调

                    $("#pic2").attr("src", res["src"]);

                    layer.msg("上传成功");
                },
                error: function () {
                    //请求异常回调
                    layer.msg("上传失败");
                }
            });
            //执行实例
            var uploadInst = upload.render({
                elem: '#phone3' //绑定元素
                , acceptMime: 'image/*',
                url: '${pageContext.request.contextPath}/manager/upload?op=appLogo' //上传接口
                ,
                accept: "images",
                done: function (res) {
                    //上传完毕回调

                    $("#pic3").attr("src", res["src"]);

                    layer.msg("上传成功");
                },
                error: function () {
                    //请求异常回调
                    layer.msg("上传失败");
                }
            });


            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                var title1 = $("#title1").val();
                var pic1 = $("#pic1").attr("src");
                var id1 = $("#id1").val();
                var title2 = $("#title2").val();
                var pic2 = $("#pic2").attr("src");
                var id2 = $("#id2").val();
                var title3 = $("#title3").val();
                var pic3 = $("#pic3").attr("src");
                var id3 = $("#id3").val();


                $.post("${pageContext.request.contextPath}/manager/ManagerServlet?op=updateppt", {
                    "title1": title1,
                    "pic1": pic1,
                    "id1": id1,
                    "title2": title2,
                    "pic2": pic2,
                    "id2": id2,
                    "title3": title3,
                    "pic3": pic3,
                    "id3": id3
                }, function (datas) {

                    var $dom = $.parseJSON(datas);
                    layer.msg($dom["error"]);

                    window.location.reload();

                });


                return false;

            });
        });
    </script>


<%@include file="/commons/footer.jsp" %>